<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Home</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="css/swiper-bundle.min.css">
		<link rel="stylesheet/less" href="css/reset.less">
		<link rel="stylesheet/less" href="css/index.less">
	</head>
	<body>
		<header>
			<div class="logn">
				<!-- 图标 -->
				<img src="img/Logo.jpg"/>
			</div>
			<!-- 导肮条 -->
			<div class="nav">
				<ul>
					<li><a href="index.html">Home</a></li>
					<li><a href="game.html">Games</a></li>
					<li><a href="blog.html">Blog</a></li>
					<li><a href="forums.html">Forums</a></li>
					<li><a href="contact.html">Contact</a></li>
				</ul>
			</div>
			<!-- 登录 -->
			<div class="login">
				<a href="#">login/sign</a>
			</div>
		</header>
		<div class="carousel">
			<div class="swiper">
			    <div class="swiper-wrapper">
			        <div class="swiper-slide" style="background: url(./img/gta.jpeg) no-repeat;background-size: 100%;">
						<div class="carousel-title">
							<h1>GTA <span>Ⅴ</span></h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
							 lorem maximus mauris scelerisque, at rutrum nulla dictum. <br />
							 Suspendisse cursus faucibus finibus.
							</p>
							<a href="#" class="btn">Read More</a>
						</div>
					</div>
			        <div class="swiper-slide" style="background: url(./img/dpx.jpeg) no-repeat;background-size: 100%;">
						<div class="carousel-title">
							<h1>地平线 <span>Ⅴ</span></h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
							 lorem maximus mauris scelerisque, at rutrum nulla dictum. <br />
							 Suspendisse cursus faucibus finibus.
							</p>
							<a href="#" class="btn">Read More</a>
						</div>
					</div>
			        <div class="swiper-slide" style="background: url(./img/apex.jpeg) no-repeat;background-size: 100%;">
						<div class="carousel-title">
							<h1><span>APEX</span></h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
							 lorem maximus mauris scelerisque, at rutrum nulla dictum. <br />
							 Suspendisse cursus faucibus finibus.
							</p>
							<a href="#" class="btn">Read More</a>
						</div>
					</div>
			    </div>
			    <!-- 如果需要分页器 -->
			    <div class="swiper-pagination"></div>
			    
			    <!-- 如果需要导航按钮 -->
			    <div class="swiper-button-prev"></div>
			    <div class="swiper-button-next"></div>
			</div>
		</div>

	<div class="four-img">
		<div id="four-img">
			<div class="four-item" style="background: url(img/10001.jpg) no-repeat;background-size: 100%;">
				<span class="cata-new">new</span>
				<div class="four-text">
					<h4><a href="#">Lacinia ex eleifend orci suscipit</a></h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
					<a href="#">3 Comments</a>
				</div>
			</div>
			<div class="four-item" style="background: url(img/10002.jpg) no-repeat;background-size: 100%;">
				<span class="cata-s">strategy</span>
				<div class="four-text">
					<h4><a href="#">Lacinia ex eleifend orci suscipit</a></h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
					<a href="#">3 Comments</a>
				</div>
			</div>
			<div class="four-item" style="background: url(img/10003.jpg) no-repeat;background-size: 100%;">
				<span class="cata-new">new</span>
				<div class="four-text">
					<h4><a href="#">Lacinia ex eleifend orci suscipit</a></h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
					<a href="#">3 Comments</a>
				</div>
			</div>
			<div class="four-item" style="background: url(img/10004.jpg) no-repeat;background-size: 100%;">
				<span class="cata-s">strategy</span>
				<div class="four-text">
					<h4><a href="#">Lacinia ex eleifend orci suscipit</a></h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
					<a href="#">3 Comments</a>
				</div>
			</div>
		</div>
	</div>
	
	<div class="games">
		<div class="games-title">
			<span class="cata-new">new</span>
			<h2>Recent Games</h2>
		</div>
		<div class="games-img">
			<div class="games-item">
				<div id="games-img" style="background: url(img/10009.jpg) no-repeat;background-size: 100%;">
					<span>new</span>
				</div>
				<div class="games-text">
					<h5>Suspendisse ut justo tem por, rutrum</h5>
					<p>Lorem ipsum dolor sit amet, consectetur adipisc ing ipsum dolor sit amet. </p>
					<a href="#">3 Comments</a>
				</div>
				<div class="games-star">
					<div class="games-left">
						<img src="img/10007.png" />
					</div>
					<div class="games-right">
						<img src="img/10008.png" />
					</div>
				</div>
			</div>
			
			<div class="games-item">
				<div id="games-img" style="background: url(img/10010.jpg) no-repeat;background-size: 100%;">
					<span>new</span>
				</div>
				<div class="games-text">
					<h5>Suspendisse ut justo tem por, rutrum</h5>
					<p>Lorem ipsum dolor sit amet, consectetur adipisc ing ipsum dolor sit amet. </p>
					<a href="#">3 Comments</a>
				</div>
				<div class="games-star">
					<div class="games-left">
						<img src="img/10007.png" />
					</div>
					<div class="games-right">
						<img src="img/10008.png" />
					</div>
				</div>
			</div>
			
			<div class="games-item">
				<div id="games-img" style="background: url(img/10011.jpg) no-repeat;background-size: 100%;">
					<span>new</span>
				</div>
				<div class="games-text">
					<h5>Suspendisse ut justo tem por, rutrum</h5>
					<p>Lorem ipsum dolor sit amet, consectetur adipisc ing ipsum dolor sit amet. </p>
					<a href="#">3 Comments</a>
				</div>
				<div class="games-star">
					<div class="games-left">
						<img src="img/10007.png" />
					</div>
					<div class="games-right">
						<img src="img/10008.png" />
					</div>
				</div>
			</div>
			
		</div>
	</div>
	
	<div class="two-img">
		<div id="two-img">
			<div id="two-T">Tournaments</div>
			<div id="two-item">
				<div class="two-item">
					<div class="two-title">Premium Tournament</div>
					<div class="two-cont">
						<div class="two-cont-left">
							<img src="img/10012.jpg" >
						</div>
						<div class="two-cont-right">
							<h4>World Of WarCraft</h4>
							<ul>
								<li>Tournament Beggins:<span> June 20, 2022</span></li>
								<li>Tounament Ends:<span> July 01, 2022</span></li>
								<li>Participants:<span> 10 teams</span></li>
								<li>Tournament Author:<span> Admin</span></li>
							</ul>
							<p><span>Prizes:</span> 1st place $2000, 2nd place: $1000, 3rd place: $500</p>
						</div>
					</div>
				</div>
			
				<div class="two-item">
					<div class="two-title">Premium Tournament</div>
					<div class="two-cont">
						<div class="two-cont-left">
							<img src="img/10012.jpg" >
						</div>
						<div class="two-cont-right">
							<h4>World Of WarCraft</h4>
							<ul>
								<li>Tournament Beggins:<span> June 20, 2022</span></li>
								<li>Tounament Ends:<span> July 01, 2022</span></li>
								<li>Participants:<span> 10 teams</span></li>
								<li>Tournament Author:<span> Admin</span></li>
							</ul>
							<p><span>Prizes:</span> 1st place $2000, 2nd place: $1000, 3rd place: $500</p>
						</div>
					</div>
				</div>
		
			</div>
		</div>
	</div>
	
	<div class="footer">
		<p>Copyright © 2022.Company name All rights reserved.<a href="#">HDM</a></p>
		<ul>
			<li><a href="contact.html">Contact</a></li>
			<li><a href="forums.html">Forums</a></li>
			<li><a href="blog.html">Blog</a></li>
			<li><a href="game.html">games</a></li>
			<li><a href="index.html">Home</a></li>
		</ul>
	</div>

	</body>
</html>
<script src="js/common.js"></script>
<script src="js/swiper-bundle.min.js"></script>
<!-- less -->
<script src="js/less.js"></script>
<script>
	 var mySwiper = new Swiper ('.swiper', {
	    loop: true,
	    // 如果需要分页器
	    pagination: {
	          el: '.swiper-pagination',
	        },
	    
	    // 如果需要前进后退按钮
	    navigation: {
	          nextEl: '.swiper-button-next',
	          prevEl: '.swiper-button-prev',
	        },
	    
	  })        
</script>